<template>
	<view>
		<!-- <view class="search-bar" style="position: relative;">
			<uni-row>
				<view class="uni-flex" style="justify-content: space-between; align-items: center;">
					<uni-col :span="20">
						<view style="position: relative;">
							<uni-search-bar radius="100" placeholder="大家都在找 鱼苗养殖" clearButton="auto" cancelButton="none"
								@confirm="search">
								<uni-icons slot="searchIcon" color="#333333" size="18" type="search" />
							</uni-search-bar>
							<button class="btn-round" type="default" size="mini"
								@click="goTo('../search/search')">搜索</button>
						</view>
					</uni-col>
					<uni-col :span="4">
						<view class="custom-weather"><text>24°</text>
							<image mode="widthFix"
								src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/home-cloudy.png"></image>
						</view>
					</uni-col>
				</view>
			</uni-row>
			<view class="uni-flex"
				style="-webkit-justify-content: space-between;justify-content: space-between; align-items: center; flex-wrap: nowrap;">
				<view><text class="search-tips">鱼塘清理</text><text class="search-tips">鱼塘清理</text><text
						class="search-tips">鱼塘清理</text></view>
				<view><text class="fc-white fs12">换一换</text><uni-icons type="loop" color="#ffffff"></uni-icons></view>
			</view>
		</view> -->
		<search-bar :classifies='classifies' ref="search"></search-bar>
		<view class="custom-bg-white" style="border-radius: 16px 16px 0 0; padding: 30rpx 30rpx; margin-top: 30rpx;">
			<view class="column-title">
				<text class="column-text">推荐专家</text>
				<text class="column-link" @click="goTo('./expertList/expertList')">更多 ></text>
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120" :show-scrollbar="false">
				<view class="expert-list" style="width: 300rpx;"
					@click="goTo(`./expertDetails/expertDetails?id=${item.id}`)" v-for="(item,index) in expertList"
					:key="index">
					<text v-if="item.levelName" class="label" :class="{level:true}">{{item.levelName}}</text>
					<view v-if="item.image">
						<image class="avatar" :src="imgUrl + item.image"></image>
					</view>
					<view v-else>
						<image class="avatar" src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/none.png">
						</image>
					</view>
					<text class="name">{{item.name}}</text>
					<text class="sort" v-if="item.fieldName">{{item.fieldName}}</text>
					<text class="info">{{item.description}}</text>
				</view>
				<view class="uni-loadmore" v-if="showLoadMore">加载中...</view>
				<!-- <view class="expert-list" style="width: 300rpx;"
					@click="goTo('../expertDetails/expertDetails')">
					<text class="label" :class="{level:true}">高级</text>
					<image class="avatar" src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/expert2.png"
						mode="widthFix"></image>
					<text class="name">巩华</text>
					<text class="sort">水产养殖</text>
					<text class="info">男，今年42岁，从业经验23年。擅长于草鱼、鲫鱼、鲤鱼等淡水鱼养殖技术</text>
				</view>
				<view class="expert-list" style="width: 300rpx;"
					@click="goTo('../expertDetails/expertDetails')">
					<text class="label" :class="{level:true}">高级</text>
					<image class="avatar" src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/expert3.png"
						mode="widthFix"></image>
					<text class="name">罗良平</text>
					<text class="sort">水产养殖</text>
					<text class="info">男，今年55岁，从业经验30年。毕业于...</text>
				</view>
				<view class="expert-list" style="width: 300rpx;">
					<text class="label" :class="{level:true}">高级</text>
					<image class="avatar" src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/expert4.png"
						mode="widthFix"></image>
					<text class="name">鲍汉中</text>
					<text class="sort">虾、蟹养殖</text>
					<text class="info">男，今年53岁，1987年淡水养殖专业毕业，一致从事水...</text>
				</view> -->
			</scroll-view>
			<view class="column-title" style="margin-bottom: 15px;">
				<text class="column-text">推荐课程</text>
				<text class="column-link" @click="goTo('./lectureList/lectureList')">更多 ></text>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<uni-row class="list" :width="nvueWidth" :gutter="25">
				<uni-col :span="12">
					<template v-for="(item,index) in classListLeft">
						<view class="list-con" :key="index"
							@click="goTo(`./classDetails/${item.type == 1?'classDetails':'video'}?id=${item.id}`)">
							<view class="list-img" v-if="item.image">
								<image class="image" mode="widthFix"
									:src="imgUrl + item.image + '?x-image-process=style/style-list'"></image>
								<view class="video-cover" v-if="item.type == 2">
									<image mode="aspectFit"
										src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/other-on.png">
									</image>
								</view>
								<text class="img-icon">精品课堂</text>
							</view>
							<view class="list-img" v-else>
								<image class="image"
									src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/none.png"
									mode="widthFix">
								</image>
								<text class="img-icon">精品课堂</text>
							</view>
							<text class="list-text">{{item.title}}</text>
							<view class="uni-flex list-info">
								<view class="author">
									<image :src="imgUrl + item.expertImage"></image>
									<text>{{item.expertName}}</text>
								</view>
								<view class="see"><uni-icons type="eye" color="#9498A0"
										size="14"></uni-icons><text>{{item.browseNum}}</text></view>
							</view>
						</view>
					</template>
					<!-- <view class="list-con" @click="goTo('../classDetails/video')">
									<view class="list-img">
										<image class="image" mode="widthFix"
											src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/class3.png"></image>
										<view class="video-cover" v-if="isVideo">
											<image mode="aspectFit"
												src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/other-on.png"></image>
										</view>
										<text class="img-icon">精品课堂</text>
									</view>
									<text class="list-text">小鱼苗应该怎么养？</text>
									<view class="uni-flex list-info">
										<view class="author">
											<image mode="widthFix"
												src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/expert4.png"></image>
											<text>李明春</text>
										</view>
										<view class="see"><uni-icons type="eye" color="#9498A0"
												size="14"></uni-icons><text>867</text></view>
									</view>
								</view>
			-->
				</uni-col>
				<uni-col :span="12">
					<template v-for="(item,index) in classListRight">
						<view class="list-con" :key="index" v-if="item.type == 1"
							@click="goTo(`./classDetails/${item.type == 1?'classDetails':'video'}?id=${item.id}`)">
							<view class="list-img" v-if="item.image">
								<image class="image" mode="widthFix"
									:src="imgUrl + item.image + '?x-image-process=style/style-list'"></image>
								<view class="video-cover" v-if="item.type == 2">
									<image mode="aspectFit"
										src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/other-on.png">
									</image>
								</view>
								<text class="img-icon">精品课堂</text>
							</view>
							<view class="list-img" v-else>
								<image class="image"
									src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/none.png"
									mode="widthFix">
								</image>
								<text class="img-icon">精品课堂</text>
							</view>
							<text class="list-text">{{item.title}}</text>
							<view class="uni-flex list-info">
								<view class="author">
									<image :src="imgUrl + item.expertImage"></image>
									<text>{{item.expertName}}</text>
								</view>
								<view class="see"><uni-icons type="eye" color="#9498A0"
										size="14"></uni-icons><text>{{item.browseNum}}</text></view>
							</view>
						</view>
					</template>
				</uni-col>
				<view class="uni-loadmore" v-if="showLoadMore">加载中...</view>
				<!-- <uni-col :span="12">
								<view class="list-con" @click="goTo('../classDetails/classDetails')">
									<view class="list-img">
										<image class="image" mode="widthFix"
											src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/class2.png"></image>
										<text class="img-icon">精品课堂</text>
									</view>
									<text class="list-text">渔场规划工艺设计高级综合班</text>
									<view class="uni-flex list-info">
										<view class="author">
											<image src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/expert3.png"></image>
											<text>李明春</text>
										</view>
										<view class="see"><uni-icons type="eye" color="#9498A0"
												size="14"></uni-icons><text>867</text></view>
									</view>
								</view>
								<view class="list-con" @click="goTo('../classDetails/classDetails')">
									<view class="list-img">
										<image class="image" mode="widthFix"
											src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/class4.png"></image>
										<text class="img-icon">精品课堂</text>
									</view>
									<text class="list-text">渔场规划工艺设计高级综合班</text>
									<view class="uni-flex list-info">
										<view class="author">
											<image src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/expert2.png"></image>
											<text>李明春</text>
										</view>
										<view class="see"><uni-icons type="eye" color="#9498A0"
												size="14"></uni-icons><text>867</text></view>
									</view>
								</view>
							</uni-col> -->
			</uni-row>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<uni-row class="list" :width="nvueWidth" :gutter="25">
				<uni-col :span="12">
					<view class="list-con" v-for="(item,index) in classListLeft" :key="index"
						@click="goTo(`./classDetails/${item.type == 1?'classDetails':'video'}?id=${item.id}`)">
						<view class="list-img" v-if="item.image">
							<image class="image" mode="widthFix"
								:src="imgUrl + item.image + '?x-image-process=style/style-list'"></image>
							<view class="video-cover" v-if="item.type == 2">
								<image mode="aspectFit"
									src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/other-on.png"></image>
							</view>
							<text class="img-icon">精品课堂</text>
						</view>
						<view class="list-img" v-else>
							<image class="image" src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/none.png"
								mode="widthFix">
							</image>
							<text class="img-icon">精品课堂</text>
						</view>
						<text class="list-text">{{item.title}}</text>
						<view class="uni-flex list-info">
							<view class="author">
								<image :src="imgUrl + item.expertImage"></image>
								<text>{{item.expertName}}</text>
							</view>
							<view class="see"><uni-icons type="eye" color="#9498A0"
									size="14"></uni-icons><text>{{item.browseNum}}</text></view>
						</view>
					</view>
				</uni-col>
				<uni-col :span="12">
					<view class="list-con" v-for="(item,index) in classListRight" :key="index"
						@click="goTo(`./classDetails/${item.type == 1?'classDetails':'video'}?id=${item.id}`)">
						<view class="list-img" v-if="item.image">
							<image class="image" mode="widthFix"
								:src="imgUrl + item.image + '?x-image-process=style/style-list'"></image>
							<view class="video-cover" v-if="item.type == 2">
								<image mode="aspectFit"
									src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/other-on.png"></image>
							</view>
							<text class="img-icon">精品课堂</text>
						</view>
						<view class="list-img" v-else>
							<image class="image" src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/none.png"
								mode="widthFix">
							</image>
							<text class="img-icon">精品课堂</text>
						</view>
						<text class="list-text">{{item.title}}</text>
						<view class="uni-flex list-info">
							<view class="author">
								<image :src="imgUrl + item.expertImage"></image>
								<text>{{item.expertName}}</text>
							</view>
							<view class="see"><uni-icons type="eye" color="#9498A0"
									size="14"></uni-icons><text>{{item.browseNum}}</text></view>
						</view>
					</view>
				</uni-col>
				<view class="uni-loadmore" v-if="showLoadMore">加载中...</view>

			</uni-row>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import {
		baseurl,
		appPageKnowledgeExpertList,
		pageKnowledgeCourse
	} from "@/api/user.js"
	let imgUrl = "https://nongmao.obs.cn-north-4.myhuaweicloud.com/"
	export default {
		data() {
			return {
				level: "高级",
				nvueWidth: 730,
				isVideo: true,
				expertList: [],
				classList: [],
				classListLeft: [],
				classListRight: [],
				showLoadMore: false,
				imgUrl,
				classifies: ['1', '2'],
				timer: '',
			}
		},
		onLoad() {
			this.showLoadMore = true;
			this.initData();
		},
		onShow() {
			const appAuthorizeSetting = uni.getAppAuthorizeSetting()
			if (appAuthorizeSetting.locationAuthorized == 'authorized') {
				this.timer = setInterval(() => {
					if (!this.$refs.search.weather) {
						uni.getLocation({
							type: 'wgs84'
						}).then((res) => {
							console.log(res)
							this.queryLocation({
								lat: res[1].latitude,
								lng: res[1].longitude
							})
							this.$refs.search.queryWeather({
								lat: res[1].latitude,
								lon: res[1].longitude
							});
						})
					}
					if (this.$refs.search.hotKeyword.length == 0) {
						this.$refs.search.getSearchHotKeys()
					}
				}, 300000)
			}
		},
		onUnload() {
			clearInterval(this.timer)
		},
		onPullDownRefresh() {
			this.showLoadMore = true;
			this.initData();
			uni.getLocation({
				type: 'wgs84'
			}).then((res) => {
				console.log(res)
				this.queryLocation({
					lat: res[1].latitude,
					lng: res[1].longitude
				})
				this.$refs.search.queryWeather({
					lat: res[1].latitude,
					lon: res[1].longitude
				});
				this.$refs.search.getSearchHotKeys()
			})
			if (this.$refs.search.hotKeyword.length == 0) {
				this.$refs.search.getSearchHotKeys()
			}
			uni.stopPullDownRefresh();
		},
		methods: {
			async appPageKnowledgeExpertList(options) {
				const res = await appPageKnowledgeExpertList(options)
				this.expertList = res.returnObj.list
			},
			async pageKnowledgeCourse(options) {
				const res = await pageKnowledgeCourse(options)
				//this.classList = res.returnObj.list
				let tempArr = res.returnObj.list;
				tempArr.forEach((item, index) => {
					if (index % 2 != 0) {
						this.classListRight.push(item)
					} else {
						this.classListLeft.push(item)
					}
				})
			},
			initData() {
				let options = {
					"condition": null,
					"pageNum": 1,
					"pageSize": 4
				}
				this.classListLeft = [];
				this.classListRight = [];
				this.appPageKnowledgeExpertList(options);
				this.pageKnowledgeCourse(options);
				this.showLoadMore = false
			},
			goTo(e) {
				var url = e;
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url("https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/nongke-bg.png");
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.custom-weather {
		color: #ffffff;
		font-size: 40rpx;
		font-family: 'DIN';
		display: flex;
		align-items: center;
		flex-wrap: nowrap;

		image {
			width: 60rpx;
			margin-left: 6rpx;
			// margin-right: 30rpx;
		}
	}

	/* 搜索栏 */
	.search-bar /deep/ .uni-searchbar__box {
		justify-content: left !important;
	}

	.search-tips {
		padding: 2px 8px;
		height: 24px;
		line-height: 24px;
		background-color: #ffffff;
		border-radius: 20px;
		color: #505863;
		font-size: 24rpx;
		margin-left: 24rpx;
	}

	.list {
		padding: 15px 30rpx;
	}

	.list-con {
		width: 100%;
		padding: 0px;
		margin-bottom: 15px;
		background-color: #ffffff;
		border-radius: 8px;
	}

	.list-img {
		position: relative;
		width: 100%;
	}

	.list-img .video-cover {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.list-img .video-cover image {
		width: 40px;
		height: 40px;
	}

	.list-img .img-icon {
		position: absolute;
		left: 0;
		top: 0;
		display: inline-block;
		width: 128rpx;
		height: 48rpx;
		line-height: 48rpx;
		font-size: 24rpx;
		text-align: center;
		color: #ffffff;
		background-image: url('https://staticfile-yj.obs.myhuaweicloud.com/tag-1.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.list-img .image {
		width: 100%;
		border-radius: 8px 8px 0px 0px;
	}


	.list-text {
		font-size: 28rpx;
		color: #283241;
		line-height: 22px;
		max-height: 44px;
		padding: 0 10rpx;
		overflow: hidden;
		font-weight: bold;
	}
</style>